import router from './index' // 引入默认的配置的静态路由
// 导入默认的配置的静态路由
import { constantRoutes } from './index' // 引入默认的配置的静态路由

// 遍历后台返回的路由列表，处理成我们需要的格式，这里的处理是一种理想化状态，非理想化状态的处理，代码多多了
// 有时候后台返回的数据并不会有明确的父子级路由嵌套关系，就只是一个一维数组，我们要根据我们的匹配规则，将其处理成想要的格式
// 这里的 arr 其实就是登录成功之后拿到的那个 menu
export const getAsyncRoutes = arr => { // 遍历后台返回的路由列表，处理成我们需要的格式，这里的处理是一种理想化状态，非理想化状态的处理，代码多多了
  return arr.map(({ path, name, component, meta, children }) => { // 遍历后台返回的路由列表，处理成我们需要的格式，这里的处理是一种理想化状态，非理想化状态的处理，代码多多了
    const route = { // 定义路由
      path, // 定义路由
      name, // 定义路由名字
      meta: { // 定义路由元信息
        ...meta, // 将后台返回的 meta 信息，绑定到路由上
        // 标记路由已经被配置了，如果项目需要的话，要在路由拦截器里根据这个值做相应的处理
        require: true // 必填
      },
      // 根据后台返回的 component 的路径，引入路由对应的组件
      component: (resolve) => { // 根据后台返回的 component 的路径，引入路由对应的组件
        if (component === 'layout') { // 如果后台返回的是 layout，则使用默认的 layout
          return require([`@/${component}/index.vue`], resolve)// 则使用默认的 layout
        } else {
          return require([`@/views/${component}.vue`], resolve) // 否则使用后台返回的 component 的路径，引入路由对应的组件
        }
      }
    }
    if (children) { // 如果存在 children
      // 如果存在 children，使用递归，将 children 也处理成我们需要的格式，并绑定给父级路由
      route.redirect = children[0].path // 定义路由重定向
      route.children = getAsyncRoutes(children) // 如果存在 children，使用递归，将 children 也处理成我们需要的格式，并绑定给父级路由
    }
    return route // 返回路由
  })
}

export const setAsyncRoutes = menu => { // 处理后台返回的路由列表，处理成我们需要的格式，这里的处理是一种理想化状态，非理想化状态的处理，代码多多了
  const menuList = getAsyncRoutes(menu) // 获得新路由数组
  // 将处理好的动态配置的路由通过 vue 提供的方式添加到 router 中，注意这个 menuList 的格式是和配置路由时的键 routes 一样格式的数组
  menuList.forEach(e => { // 循环
    router.addRoute(e) // 添加路由
  })
  // 路由 options 并不会随着 addRoutes 动态响应，所以要在这里进行设置
  router.options.routes = constantRoutes.concat(menuList) // 设置路由
}
